<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>在线测试</title>
    <style type="text/css">
        body {
            background-color: #E7F1FA;
            margin: 0;
        }

        #top {
            background-color: darkcyan;
            color: white;
            height: 76px;
            line-height: 76px;
            letter-spacing: 6px;
        }

        #logo {
            background: url(img/logo.png) 0 center no-repeat;
            height: 76px;
            text-indent: 76px;
            font-size: 38px;
            font-weight: 900;
            margin-left: 30px;
            margin-right: 90px;
            float: left;
        }

        #main {
            margin: -15px auto;
        }

        #left {
            float: left;
            width: 130px;
        }

        #left ul {
            background-color: bisque;
            width: 160px;
            border: solid 2px #ccc;
            border-radius: 8px;
            margin: 0px;
            padding: 20px 30px;
        }

        #left ul li {
            list-style-type: none;
            background: url(img/b.png) no-repeat 0 center;
            border-bottom: dashed 1px #CCCCCC;
            height: 50px;
            line-height: 50px;
            text-indent: 43px;
        }

        #left ul li:first-child {
            background: url(img/a.png) no-repeat 0 center;
        }

        #left ul li:nth-child(2) {
            background: url(img/search.png) no-repeat 0 center;
        }

        #right {
            margin-left: 230px;
        }

        .box_top {
            height: 39px;
            line-height: 39px;
            color: #fff;
            background: coral;
            padding-left: 20px;
            border-radius: 8px;
        }

        table {
            width: 100%;
            border: dashed 1px #377A8E;
            border-collapse: collapse;
        }

        th {
            background-color: #377A8E;
            color: white;
            padding: 6px 18px;
        }

        td {
            text-align: center;
            padding: 6px 18px;
        }

        caption {
            color: blue;
            font-size: 26px;
            margin-bottom: 10px;
        }

        .bt {
            background-color: #D40112;
            border-radius: 10px;
            height: 40px;
            width: 100px;
            font-size: 15px;
            color: #FFFFFF;
            margin-top: 10px;
        }

        .clear {
            clear: both;
        }

        #footer {
            margin: 2px auto;
            height: 30px;
            background-color: darkcyan;
            color: #fff;
            text-align: center;
            font-size: 12px;
            line-height: 30px;
        }

        #show {
            color: blue;
            font-size: 16px;
            line-height: 26px;
            margin: 20px;
        }

        #time {
            color: forestgreen;
            font-weight: bold;
        }

        #ag {
            display: none;
            position: absolute;
            left: 145px;
            bottom: 0;
        }

        #test1 {
            position: relative;
        }
    </style>
</head>

<body>
    <div id="top">
        <div id="logo">
            在线测试系统
        </div>
        <img src="img/zsj.png" />
        <!--2019年6月18日,星期二--><span id="rq"></span>
    </div>
    <div id="main">
        <div id="left">
            <ul>
                <li>首页</li>
                <li>成绩查询</li>
                <li>单元测试1</li>
                <li>单元测试2</li>
                <li>单元测试3</li>
                <li>单元测试4</li>
                <li>单元测试5</li>
                <li>单元测试6</li>
                <li>单元测试7</li>
                <li>单元测试8</li>
            </ul>
        </div>
        <div id="right">

            <div id="test1">
                <h3 class="box_top">单 元 测 试 1</h3>
                <span id="time"></span>
                <div id="show"></div>
                <button onclick="Grade()" id="tj" class="bt">提 交 试 卷</button>
                <button id="ag" class="bt">重 置 试 卷</button>
            </div>
        </div>
    </div>
    <div class="clear"></div>
    <div id="footer">
        Copyright © cojar工作室 [2019版]
    </div>
</body>
<script type="text/javascript">
    //	页眉显示日期
    rq = document.getElementById("rq");
    now = new Date();
    var week_Array = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
    rq.innerHTML = now.getFullYear() + "年" + now.getMonth() + "月" + now.getDate() + "日" + "," + week_Array[now
        .getDay()];
    //	主体功能
    var show = document.getElementById("show");
    var err = document.getElementById("err")
    var ag = document.getElementById("ag")
    var questions = new Array();
    var questionXz = new Array();
    var answers = new Array();
    questions[0] = "下列选项中（ ）可以用来检索下拉列表框中被选项目的索引号。";
    questionXz[0] = ["A.selectedlndex", "B.options", "C.lenght", "D.size"];
    answers[0] = 'A';
    questions[1] = "JavaScript中（ ）方法可以对数组元素进行排序。";
    questionXz[1] = ["A.add()", "B.join()", "C.sort()", "D.length()"];
    answers[1] = "C"
    var len = questions.length;
    for (var i = 0; i < len; i++) {
        show.innerHTML += i + 1 + "." + questions[i] + "<br />";
        // show.innerHTML += '<label><input type="radio" onclick="check(this)" value="A" name="tm' + i + '" />' + questionXz[i][0] + "</label><br />";
        show.innerHTML += '<label><input type="radio" onclick="check(this)" value="B" name="tm' + i + '" />' +
            questionXz[i][1] + "</label><br />";
        show.innerHTML += '<label><input type="radio" onclick="check(this)" value="C" name="tm' + i + '" />' +
            questionXz[i][2] + "</label><br />";
        show.innerHTML += '<label><input type="radio" onclick="check(this)" value="D" name="tm' + i + '" />' +
            questionXz[i][3] + "</label><br />";
        //show.innerHTML+='答案是'+answers[i]+"<br />";
    }

    function getValue(btBroup) { //遍历每组，获取选中的选项对应的值
        var btBroup = document.getElementsByName(btBroup);
        for (var i = 0; i < btBroup.length; i++) {
            if (btBroup[i].checked) {
                return btBroup[i].value;
            }
        }
    }

    function Grade() { //计算总分
        //time.innerHTML = "";
        clearInterval(timeID);
        var correct = 0;
        for (var i = 0; i < len; i++) {
            if (getValue("tm" + i) == answers[i]) {
                ++correct;
            }

        }
s 
        //alert(correct)
        var result = ((correct / len) * 100).toFixed();
        //time.innerHTML = "您做对了" + correct + '题目,' + result + "分"; 
        time.innerHTML = '<h2 style="color: red;">测试成绩：' + result + '分</h2><hr>';
        //time.innerHTML += '正确答案为：' + s;
        var tj = document.getElementById("tj");
        tj.disabled = true; //确认提交后，“提交试卷”按钮设为不可用，阻止重复提交
        ag.style.display = "inline-block";
        tj.style.background = "gray"
    }




    var time = document.getElementById('time');
    var ks = new Date();
    var msks = ks.getTime();
    var js = msks + 60 * 1 * 1000;
    timeID = setInterval("jsover()", 1000);

    function jsover() {
        var syfz = Math.floor((js - new Date().getTime()) / (1000 * 60)); //计算剩余分钟数 
        var sym = Math.floor((js - new Date().getTime() - syfz * 1000 * 60) / (1000)); //计算剩余的秒数 
        if (syfz < 0) {
            Grade()
        } else
            time.innerHTML = "离考试结束还剩" + syfz + "分" + sym + "秒";
    }

    var inp = document.querySelectorAll("label>input")
    ag.addEventListener("click", function () {
        for (var i = 0; i < inp.length; i++) {
            inp[i].checked = false;
            tj.disabled = false;
            tj.style.background = "#D40112";
        }
    })
</script>

</html>